<template>
  <div class="w-100 h-100">
    <div style="height: 80px">
      <tablleBar
        @submit-swich="swichTable"
        :list="['面源污染控制率', '水体质量']"
      ></tablleBar>
    </div>
    <div class="w-100 h-10 d-flex justify-content-end" style="width: 100%; ;position: absolute;">
      <template v-if="activeItem == 0">
        <FakeLegend
            style="margin: auto 30px auto 0px"
            :color="colorSingleList"
            :text="['目标取值', '建设后实际值']"
        >
        </FakeLegend>
      </template>

      <template v-if="activeItem == 1">
        <lineLabel shapeColor="rgba(3, 230, 254, 1)" text="水质IV级以上水体数量" style="marginRight: 30px"/>
        <lineLabel shapeColor="rgba(184, 235, 143, 1)" text="水质IV级以下水体数量"/>
      </template>
    </div>
    <div class="shj0-box" style="width:100%;height: calc(100% - 80px);overflow-x: auto">
      <div id="shj0" style="width: 100%; height: 100%" v-if="activeItem == 0"></div>
      <div id="shj" style="width: 100%; height: 100%" v-if="activeItem == 1"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import tablleBar from "@/components/project/tablleBar.vue";
import { useOptions } from "@/hook/useOptions";
import { chartOptions } from "@/hook/chartOptions";
import {useFunc} from "@/hook/useFunc";

const option: any = chartOptions().twoBarOption(echarts,['目标取值', '建设后实际值']);

const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.jsgl.shj[activeItem.value];
  } catch (error) {}
  return data;
});
let myChart: any;




watch(
  () => current.value,
  (val) => {
    if (val) {
      nextTick(() => {
        if(activeItem.value == 1){
          setSzlOption(val)
        }else{
          setMywr(val)
        }
      })

    }
  }
);

const activeItem = ref(0);
const swichTable = (item: any) => {
  activeItem.value = item;
};

const setMywr = (val: any) => {
  myChart = echarts.init(document.getElementById("shj0") as HTMLElement);
  myChart.setOption(option)
  myChart.setOption({
    xAxis: [
      {
        data: useOptions().paishuiList.map((item: any) => item.label),
        axisLabel: {
          interval: "auto", // 自动计算间隔
          minInterval: 1, // 设置最小间隔为1
          fontSize: 20,
          color: "#667A8E",
        },
      },
    ],
    yAxis: [
      {
        name: "%",
      },
    ],
    dataZoom: [
    {
                type: 'slider',
                height: 0,
                moveHandleSize: 10,
                xAxisIndex: 0,
                zoomLock: true,
                bottom: "20%",
                start: 0,
                end: 60
            }
        ],
    grid: {
      bottom: "15%",
      left: "5%",
      right: "5%"
    },
    series: [{ data: val[0] }, { data: val[1] }],
  });

  const scrollContainer = document.querySelector(".shj0-box");
  // useFunc().autoScroll(scrollContainer, "horizontal");
}

const setSzlOption = (arr) => {
  let option1: any = {
    color: colorSingleList,
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      backgroundColor: "rgba(28,64,81,0.7)",

      extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
      textStyle: {
          color: "white",
          fontSize: 20,
        },
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "15%",
      top: "14%",
      containLabel: true,
    },
    //你的代码
    xAxis: {
      type: "category",
      data: useOptions().year(),
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "#667A8E",
        },
      },
      axisLabel: {
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        name: "",
        type: "value",
        nameTextStyle: {
          color: "#8994A3",
          fontSize: 20,
        },
        axisLabel: {
          fontSize: 20,
          color: "#667A8E",
          formatter: "{value}" + "",
        },
        splitLine: {
          // 配置分割线
          show: true,
          lineStyle: {
            color: "rgba(92, 225, 255, 0.5)", // 蓝色分割线
            type: "solid", // 实线
          },
        },
      },
    ],
    series: [
      {
        name: "水质IV级以上水体数量",
        type: "line",
        data: [],
        color: "rgba(3, 230, 254, 1)",
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(3, 230, 254, 0.8)", // 颜色渐变起始颜色
              },
              {
                offset: 0.3,
                color: "rgba(3, 230, 254, 0)", // 颜色渐变结束颜色
              },
            ]),
          },
        },
      },
      {
        name: "水质IV级以下水体数量",
        type: "line",
        data: [],
        color: "rgba(184, 235, 143, 1)",
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(184, 235, 143, 0.8)", // 颜色渐变起始颜色
              },
              {
                offset: 0.3,
                color: "rgba(184, 235, 143, 0)", // 颜色渐变结束颜色
              },
            ]),
          },
        },
      },
    ],
  };
  myChart = echarts.init(document.getElementById("shj") as HTMLElement);
  myChart.setOption(option1);
  myChart.setOption({
    yAxis: [
      {
        name: "个",
      },
    ],
    series: [
      {
        data: arr[0],
      },
      {
        data: arr[1]
      }
    ],
  });
}

onMounted(() => {


});
</script>

<style></style>
